<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes myanim{
				from{width: 100px;}
				to{height: 300px;}
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d1:hover{
				animation: myanim 2s;
				width: 100px;
				height: 100px;
				background-color: red;
			}
			@keyframes bganim{
				from{width: 100px;}
				to{height: 300px;}
				0%{background-color: #0000FF;}
				25%{background-color: #FF00FF;}
				50%{background-color: #FFA500;}
				75%{background-color: green;}
				100%{background-color: red;}
			}
			#d2{
				width: 100px;
				height: 100px;
				margin-left: 300px;
				background-color: yellow;
			}
			#d2:hover{
				animation: bganim 2s;
				width: 100px;
				height: 100px;
				/* background-color: red; */
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
	</body>
</html>
